<template>
  <view catchtouchmove="true">
    <u-action-sheet :title="title" :show="show" @close="cancel" :closeOnClickOverlay="true" :closeOnClickAction="true"
      round="20rpx">
      <view class="body">
        <view class="option" v-if="list && type == 'radius'">
          <view class="option-item" hover-class="hover" v-for="(item,index) in list" :key="index"
            @click="chooseItem(item.id)">{{ item.name }}

            <image class="choose" :src="
                value == item.id
                  ? '/static/login_ic_selected@2x.png'
                  : '/static/login_ic_select@2x.png'
              " mode="aspectFit">
            </image>
          </view>
        </view>
        <view class="option" v-if="list && type == 'checkbox'">
          <view class="option-item" hover-class="hover" v-for="(item,index) in list" :key="index"
            @click="checkItem(item.id)">{{ item.name }}

            <image class="choose" :src="
                valueList.includes(item.id)
                  ? '/static/login_ic_selected@2x.png'
                  : '/static/login_ic_select@2x.png'
              " mode="aspectFit">
            </image>
          </view>
        </view>
        <button class="btn" v-if="type == 'radius'" @click="submit">确定</button>
        <button class="btn" v-else @click="submitCheckBox">确定</button>
      </view>
    </u-action-sheet>
  </view>
</template>

<script>
export default {
  name: 'BaseAction',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'radius'
    }
  },
  data () {
    return {
      value: null,
      valueList: []
    };
  },
  mounted () {
  },
  methods: {
    cancel () {
      this.$emit('close')
    },
    // 单选
    chooseItem (id) {
      if (this.value == id) this.value = null
      else this.value = id
    },
    // 多选
    checkItem (id) {
      if (this.valueList.includes(id)) {
        this.valueList.splice(this.valueList.indexOf(id), 1)
      } else {
        this.valueList.push(id)
      }
    },
    // 单选
    submit () {
      if (this.value) {
        this.$emit('submit', this.list[this.list.findIndex(item => item.id == this.value)])
        this.$emit('close')
        this.value = null
      }
      else return uni.$u.toast('请选择')
    },
    // 多选提交
    submitCheckBox () {
      if (this.valueList && this.valueList.length) {
        let arr = this.list.filter((item) => {
          if (this.valueList.includes(item.id)) return item
        })
        this.$emit('submit', arr)
        this.$emit('close')
        this.valueList = []
      } else return uni.$u.toast('请选择')
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-popup__content {
  background: #f5f5f5;
}
::v-deep .u-action-sheet__header {
  padding: 48rpx 30rpx;
}

::v-deep .u-action-sheet__header__title {
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 36rpx;
}

::v-deep .u-action-sheet__header__icon-wrap {
  top: 48rpx;
}

::v-deep .u-icon__icon {
  color: #1a1a1a !important;
}
.option {
  margin: 0 auto;
  border-radius: 20rpx;
  width: 702rpx;
  height: auto;
  max-height: 50vh;
  overflow-y: scroll;
  background: #ffffff;
  .hover {
    background: rgba($color: #000000, $alpha: 0.02);
  }
  &-item {
    position: relative;
    height: 112rpx;
    line-height: 112rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1a1a1a;
    &::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      content: '';
      height: 1rpx;
      width: 90%;
      background: rgba($color: #000000, $alpha: 0.1);
    }
    .choose {
      position: absolute;
      right: 32rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 40rpx;
      height: 40rpx;
    }
    &:last-child::after {
      height: 0rpx;
    }
  }
}
.btn {
  margin: 40rpx auto;
  width: 686rpx;
  height: 80rpx;
  color: #ffffff;
  background: #FF5900;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fefeff;
}
</style>
